<script setup lang="ts">
import {ref} from "vue";

const dataDate = ref('')
const typeValue = ref('day')
const options = [
  {label: '按年', value: 'year'},
  {label: '按月', value: 'month'},
  {label: '按日', value: 'day'},
]
const emit = defineEmits<{
  (e: 'change', value: any, otherParam: any): void
}>()
const handleClick = (value) => {
  emit('change', value, typeValue.value)
}

const shortcuts = [
  {
    text: '本月',
    value: [new Date(), new Date()],
  },
  {
    text: '今年',
    value: () => {
      const end = new Date()
      const start = new Date(new Date().getFullYear(), 0)
      return [start, end]
    },
  },
  {
    text: '过去6个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 6)
      return [start, end]
    },
  },
]
const shortcutsDay = [
  {
    text: '上个星期',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '上个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: '最近3个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]
</script>

<template>
  <div style="padding-top: 10px;padding-left: 10px;">
    <el-select
      style="width: 140px;margin-right: 10px"
      v-model="typeValue"
      placeholder="选择日期类型"
      clearable
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <el-date-picker v-if="typeValue=='year'"
                    v-model="dataDate"
                    @change="handleClick"
                    type="year"
                    placeholder="选择年份"
                    format="YYYY"
                    value-format="YYYY"
    />
    <el-date-picker v-if="typeValue === 'month'"
                    v-model="dataDate"
                    type="monthrange"
                    unlink-panels
                    @change="handleClick"
                    range-separator="至"
                    start-placeholder="起始月"
                    end-placeholder="结束月"
                    :shortcuts="shortcuts"
                    formatl="YYYY/MM"
                    value-format="YYYY-MM"
    />
    <el-date-picker v-if="typeValue=='day'"
                    v-model="dataDate"
                    type="daterange"
                    @change="handleClick"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="起始日期"
                    end-placeholder="结束日期"
                    :shortcuts="shortcutsDay"
                    format="YYYY/MM/DD"
                    value-format="YYYY-MM-DD"
    />
  </div>

</template>

<style scoped>

</style>
